package cn.mujiankeji.mbrowser.界面.标签页.快照

import androidx.compose.foundation.layout.FlowRow
import androidx.compose.foundation.layout.PaddingValues
import androidx.compose.foundation.layout.Spacer
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.foundation.layout.height
import androidx.compose.foundation.layout.padding
import androidx.compose.foundation.layout.size
import androidx.compose.foundation.layout.width
import androidx.compose.foundation.lazy.LazyColumn
import androidx.compose.foundation.lazy.items
import androidx.compose.material.icons.filled.KeyboardArrowLeft
import androidx.compose.material.icons.filled.KeyboardArrowRight
import androidx.compose.material3.Card
import androidx.compose.material3.CardDefaults
import androidx.compose.material3.FilterChip
import androidx.compose.material3.MaterialTheme
import androidx.compose.material3.Text
import androidx.compose.runtime.Composable
import androidx.compose.runtime.LaunchedEffect
import androidx.compose.runtime.collectAsState
import androidx.compose.runtime.getValue
import androidx.compose.runtime.mutableStateListOf
import androidx.compose.runtime.mutableStateOf
import androidx.compose.runtime.rememberCoroutineScope
import androidx.compose.runtime.setValue
import androidx.compose.ui.Modifier
import androidx.compose.ui.unit.dp
import cn.mujiankeji.mbrowser.app.应用组件.应用图片
import cn.mujiankeji.mbrowser.app.应用路由
import cn.mujiankeji.mbrowser.工具.mlog
import cn.mujiankeji.mbrowser.数据.枚举类.页面状态枚举
import cn.mujiankeji.mbrowser.数据.模型类.基本项目
import cn.mujiankeji.mbrowser.数据.快照来源.快照源_列表
import cn.mujiankeji.mbrowser.数据.快照来源.快照来源接口
import cn.mujiankeji.mbrowser.界面.标签页.统一标签页布局
import cn.nr19.jian.E2Factory
import cn.nr19.jian.`object`.JianLei
import kotlinx.coroutines.CoroutineScope
import kotlinx.coroutines.Dispatchers
import kotlinx.coroutines.launch
import kotlinx.coroutines.withContext

class 快照状态_列表(
    val 来源 : 快照源_列表,
) : 快照状态() {

    override fun 来源(): 快照来源接口 = 来源

    var 分类标签列表 = mutableStateListOf<基本项目>()
    var 内容列表 = mutableStateListOf<基本项目>()

    var 上一页地址 by mutableStateOf<String?>(null)
    var 下一页地址 by mutableStateOf<String?>(null)

    init {
        super.地址.value = 来源.地址
        super.标题.value = 来源.地址
    }

    override suspend fun CoroutineScope.加载(code : String) {
        super.加载进度.value = 60

        //
        val jian = JianLei()

        // 标题 、上下页
        withContext(Dispatchers.IO){
            launch {
                super.标题.value = tryText(code,来源.标题,jian)
                来源.列表上一页?.let { 上一页地址 = tryText(code,it,jian) }
                来源.列表下一页?.let { 下一页地址 = tryText(code,it,jian) }
            }

            // tab
            launch {
                try {
                    E2Factory.list(code,来源.分类标签,jian)?.forEach { scope->
                        基本项目(
                            标题 = tryText(scope,来源.分类标签标题,jian),
                            地址 = tryText(scope,来源.分类标签地址,jian),
                            图片 = 来源.分类标签图标?.let{tryText(scope,it,jian)}
                        ).also {分类标签列表.add(it)}
                    }
                }catch (e : Exception){
                    mlog("内容列表轻页面错误 - tab",e)
                    e.printStackTrace()
                }
            }

            // list
            launch {
                tryList(code,来源.列表,jian)?.forEach { scope->
                    基本项目(
                        标题 = tryText(scope,来源.列表项目标题,jian),
                        地址 = tryUrl(scope,来源.列表项目地址,jian)?:"",
                        副标题 = 来源.列表项目副标题?.let{tryText(scope,it,jian)},
                        图片 = 来源.列表项目图片?.let{tryUrl(scope,it,jian)},
                    ).also {内容列表.add(it)}
                }
            }
        }

        super.加载进度.value = 100
        super.状态.value = 页面状态枚举.完成
    }

    fun 点击项目(url : String){
        mlog("加载",url)
        应用路由.加载(url,来源.地址)
    }

}

@Composable
fun 快照实现_列表(state : 快照状态_列表){
    val coroutine = rememberCoroutineScope()
    快照页面布局(state,true){
        内容视图(state)
    }
}


@Composable
private fun 内容视图(state: 快照状态_列表){
    LazyColumn(
        modifier = Modifier.fillMaxSize(),
        contentPadding = PaddingValues(vertical = 8.dp)
    ) {
        // 分类标签部分
        if (state.分类标签列表.isNotEmpty()) {
            item {
                FlowRow(Modifier.padding(horizontal = 10.dp)) {
                    state.分类标签列表.forEach {
                        FilterChip(
                            selected = false,
                            onClick = { state.点击项目(it.地址) },
                            label = { Text(it.标题, maxLines = 1) },
                            modifier = Modifier.padding(horizontal = 5.dp))
                    }
                }
            }

            item {
                Spacer(Modifier.height(10.dp))
            }
        }


        // 内容列表部分
        items(state.内容列表) { 项目 ->
            Card(
                modifier = Modifier
                    .fillMaxWidth()
                    .padding(horizontal = 16.dp, vertical = 10.dp),
                colors = CardDefaults.cardColors().copy(containerColor = MaterialTheme.colorScheme.surfaceContainer),
                shape = MaterialTheme.shapes.extraSmall,
                onClick = { state.点击项目(项目.地址) }
            ) {
                androidx.compose.foundation.layout.Row(
                    modifier = Modifier.padding(16.dp),
                    verticalAlignment = androidx.compose.ui.Alignment.CenterVertically
                ) {
                    // 如果有图片则显示
                    项目.图片?.let {
                        应用图片(项目.图片, modifier = Modifier.size(60.dp,50.dp)
                            .padding(end = 10.dp))
                    }

                    androidx.compose.foundation.layout.Column(
                        modifier = Modifier.weight(1f)
                    ) {
                        Text(
                            text = 项目.标题,
                            style = androidx.compose.material3.MaterialTheme.typography.titleMedium,
                            maxLines = 2,
                            overflow = androidx.compose.ui.text.style.TextOverflow.Ellipsis
                        )

                        项目.副标题?.let {
                            Text(
                                text = it,
                                style = MaterialTheme.typography.bodySmall,
                                color = MaterialTheme.colorScheme.onSurfaceVariant,
                                maxLines = 6,
                                overflow = androidx.compose.ui.text.style.TextOverflow.Ellipsis,
                                modifier = Modifier.padding(top = 4.dp)
                            )
                        }
                    }
                }
            }
        }

        // 分页按钮
        if (state.上一页地址 != null || state.下一页地址 != null) {
            item {
                androidx.compose.foundation.layout.Row(
                    modifier = Modifier
                        .fillMaxWidth()
                        .padding(16.dp),
                    horizontalArrangement = androidx.compose.foundation.layout.Arrangement.SpaceBetween
                ) {
                    state.上一页地址?.let {
                        androidx.compose.material3.Button(
                            onClick = { state.点击项目(it) },
                            enabled = it.isNotEmpty()
                        ) {
                            androidx.compose.material.icons.Icons.Filled.KeyboardArrowLeft.let { icon ->
                                androidx.compose.material3.Icon(
                                    imageVector = icon,
                                    contentDescription = "上一页",
                                    modifier = Modifier.padding(end = 4.dp)
                                )
                            }
                            Text("上一页")
                        }
                    } ?: androidx.compose.foundation.layout.Spacer(Modifier.width(0.dp))

                    state.下一页地址?.let {
                        androidx.compose.material3.Button(
                            onClick = { state.点击项目(it) },
                            enabled = it.isNotEmpty()
                        ) {
                            Text("下一页")
                            androidx.compose.material.icons.Icons.Filled.KeyboardArrowRight.let { icon ->
                                androidx.compose.material3.Icon(
                                    imageVector = icon,
                                    contentDescription = "下一页",
                                    modifier = Modifier.padding(start = 4.dp)
                                )
                            }
                        }
                    } ?: androidx.compose.foundation.layout.Spacer(Modifier.width(0.dp))
                }
            }
        }
    }
}

